<template>
  <div class="menu-title">
    <div class="centerTitlebox">
      <div v-for="(item, index) in menuList" :key="index" class="titleTxt" :class="actIndex == index ? 'act' : ''" @mouseenter="enter(index)" @mouseleave="leave()" @click="actIndexOne(index)">
        <router-link :to="item.route">
          {{item.title}}
        </router-link>
        <div v-for="(ele, inde) in item.titleOne" v-show="item.isHow" :key="inde" class="titleTxt_One" @click="GetPutrouter(item, ele)">
          <div class="livnk">
            {{ ele.barseName }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ys_utils } from 'ys-utils-js';
export default {
  name: 'Header',

  data() {
    return {
      isHowIndex: 0,
      actIndex: localStorage.getItem('actindex'),
      title: '',
      userlist: {},
      menuList: [
        {
          route: '',
          title: "首页",
          isHow: false
        },
        // {
        //   route: '',
        //   title: '产品服务',
        //   isHow: false,
        //   titleOne: [
        //     // { barseName: 2, show: 0 },
        //     // { barseName: 2, show: 1 },
        //     // { barseName: 2, show: 2 },
        //     // { barseName: 2, show: 3 },
        //     // { barseName: 2, show: 4 }
        //   ]
        // },
        {
          route: '',
          title: '联系我们',
          isHow: false,
          titleOne: [

          ]
        },
      ]
    }
  },
  watch: {},
  created() {
    this.userlist = ys_utils.getSessionStorage('CommData') && JSON.parse(ys_utils.getSessionStorage('CommData')) || {};
  },
  methods: {
    GetPutrouter() {

    },

    actIndexOne(v) {
      this.actIndex = v
      switch (this.userlist.user_cn_type) {
        case '1':
          this.$router.push({ name: 'Tenantmanagement' });
          break;
        case '2':
          this.$router.push({ name: 'Equipmentmonitoring' });
          break;
        case '3':
          this.$router.push({ name: 'algorithmForm' });
          break;
        default:

          break;
      }
      // localStorage.setItem("actindex", v);
    },
    leave() {
      this.menuList[this.isHowIndex].isHow = false
    },
    enter(v) {
      this.isHowIndex = v
      this.menuList[v].isHow = true
    },


  }
}
</script>

<style scoped type="text/less" lang="less">
input::-webkit-input-placeholder {
  color: #c9cfd8;
}

.menu-title {
  height: 79px;
  line-height: 79px;
  .centerTitlebox {
    position: relative;
    margin: 0 auto;
    z-index: 99;

    display: flex;
  }
  .titleTxt {
    margin: 0 50px;
    cursor: pointer;
    &:hover {
      a {
        border-bottom: 2px solid rgba(255, 255, 255, 0.84);
      }
    }
    a {
      display: flex;
      justify-content: center;
      align-items: center;

      border-bottom: 2px solid transparent;
      padding: 0 6px;
      text-decoration: none;
      font-family: SourceHanSansCN-Regular;
      font-size: 18px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0px;
      color: #ffffff;
    }
    transition: all 0.2s linear;
  }
  .act {
    // background-color: #2d79b1;
  }
  .titleTxt:hover {
    // background-color: #2d79b1;
  }
  .titleTxt_One {
    display: flex;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #cce6f7;
    font-weight: 500;
    border-bottom: 1px #9fd0f0 solid;
    transition: all 0.5s linear;
    .livnk {
      font-size: 14px;
      color: #1b5f90;
      line-height: 35px;
    }
  }
  .titleTxt_One .livnk:hover {
    color: #a12524;
  }
}
</style>
